import { SearchOutlined, SyncOutlined } from "@ant-design/icons";
import { Button, Divider, Form, Input, Tabs } from "antd";
import { TabsProps } from "antd/lib";
import { PropsWithChildren, useState } from "react";
import { SvgIcon } from "../../components/SvgIcon";
import { FilterForm } from "@/components/FilterForm";
import { FilterFormLawsAndRegulations } from "@/components/FilterFormLawsAndRegulations";
import styles from "../index.module.css";
import { useRequest } from "ahooks";
import { fetchRecommendQuestion } from "@/api/server/recommend_question";

interface ILegalSearchIndexProps {
  className?: string;
  onSubmit?: (str?: string, formValues?: any, type?: string) => void;
}
export function LegalSearchIndex(
  props: PropsWithChildren<ILegalSearchIndexProps>
) {
  const { onSubmit } = props;
  const [formCase] = Form.useForm();
  const [formLaw] = Form.useForm();
  const [type, setType] = useState("1");
  const [showFilter, setShowFilter] = useState(false);
  const { data, refresh } = useRequest(() =>
    fetchRecommendQuestion({ question_type: "law" })
  );

  const [inputValue, setInputValue] = useState("");

  const items: TabsProps["items"] = [
    {
      key: "1",
      label: "案例",
      children: <FilterForm form={formCase} />,
    },
    {
      key: "2",
      label: "法规",
      children: <FilterFormLawsAndRegulations form={formLaw} />,
    },
  ];

  return (
    <div className="px-[76px] pt-[54px] flex flex-col items-center h-full">
      <img src="/images/logo-mini.png" className="w-[36px]" />
      <div className={[styles.title].join(" ")}>法律检索，智能化检索案例</div>
      <div className={styles.desc}>输入搜索内容检索相关案例</div>

      <div className="w-full mt-[35px]">
        <div className="flex flex-col w-full min-h-[64px] border border-[#e8eaf2] border-solid rounded-[12px] bg-white p-[12px]">
          <div className="flex-1 min-h-0">
            <Input.TextArea
              autoSize={{ minRows: 3, maxRows: 6 }}
              variant={"borderless"}
              value={inputValue}
              onChange={(e) => setInputValue(e.target.value)}
              placeholder="请输入需要检索的内容，支持按Shift+Enter换行"
              maxLength={5000}
            />
          </div>
          {showFilter && (
            <div className="px-[8px] searchTabs">
              <Divider style={{ margin: "10px 0" }} />
              <Tabs
                color="black"
                tabBarStyle={{ backgroundColor: "transparent" }}
                activeKey={type}
                items={items}
                onChange={(e) => {
                  setType(e);
                }}
              />
            </div>
          )}
          <div className="flex flex-row justify-between items-center mt-[24px]">
            {!showFilter ? (
              <div
                className="flex flex-row items-center text-[#585a73] cursor-pointer"
                onClick={() => setShowFilter(true)}
              >
                <SvgIcon size={20} name="extend-filter-line" />
                <div>筛选</div>
              </div>
            ) : (
              <div
                className="flex flex-row items-center text-[#585a73] cursor-pointer"
                onClick={() => setShowFilter(false)}
              >
                <SvgIcon size={20} name="tongyi-false-line" />
                <div>关闭筛选</div>
              </div>
            )}
            <div>
              <Button
                type="primary"
                shape="circle"
                icon={<SearchOutlined />}
                onClick={() => {
                  let formValues = {};
                  if (showFilter) {
                    if (type === "1") {
                      formValues = formCase.getFieldsValue();
                    } else if (type === "2") {
                      formValues = formLaw.getFieldsValue();
                    }
                  }
                  onSubmit(inputValue, formValues, type);
                  setInputValue("");
                }}
              />
            </div>
          </div>
        </div>
      </div>
      <div className="w-full mt-[24px]">
        <div className="flex flex-row justify-between">
          <div className="text-[#666e79] text-[14px]">试试这样问</div>
          <div
            className="flex flex-row items-center gap-[8px] cursor-pointer"
            onClick={() => {
              refresh();
            }}
          >
            <SyncOutlined style={{ color: "#585a73" }} />
            <div className="text-[#585a73] text-[14px]">换一批</div>
          </div>
        </div>
      </div>
      <div className="w-full mt-[24px] flex flex-row flex-wrap con">
        {data?.results?.slice(0, 4).map((item, i) => {
          return (
            <div
              className="flex-1 min-w-[40%]"
              key={i}
              onClick={() => {
                setInputValue(item.question);
              }}
            >
              <div className="label">{item.question}</div>
              <SvgIcon name="icon-zhuandao_default" className="useIcon" />
            </div>
          );
        })}
      </div>
    </div>
  );
}
